<template>
	<view>
		<view class="box">
			<view class="tabbar" :style="'background: url('+ z_imgPath + 'shouye/tabbarBg.png'+ ') repeat 0 0 / 100% 100%;'">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toTabbarUrl(item.url,index)">
					<view class="item_info">
						<view class="item_info_img" v-if="index != 2">
							<image v-if="type != index" :src="item.img"></image>
							<image v-else :src="item.img_sel"></image>
						</view>
						<view class="item_info_img1 rota"
							:style="'background: url('+ item.img+ ') repeat 0 0 / 100% 100%;'"
							v-if="index == 2">
								无限
						</view>
						<view class="item_info_text" :class="type == index ?'selectText':''">{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="bom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props:{
			type: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				z_imgPath:'https://qt.yhemall.com/',
				list:[
					{
						img:'/static/tabbar/chousang.png',
						img_sel:'/static/tabbar/choushang_sel.png',
						text:'抽赏',
						url:'/pages/shouye/index'
					},
					{
						img:'/static/tabbar/chouka.png',
						img_sel:'/static/tabbar/chouka_sel.png',
						text:'抽卡',
						url:'/pages/chouka/index'
					},
					{
						img:'/static/tabbar/wuxian.png',
						img_sel:'/static/tabbar/wuxian.png',
						text:'',
						url:'/pages/jiaoliu/jiaoliu'
					},
					{
						img:'/static/tabbar/hegui.png',
						img_sel:'/static/tabbar/hegui_sel.png',
						text:'盒柜',
						url:'/pages/sangdai/sangdai'
					},
					{
						img:'/static/tabbar/wode.png',
						img_sel:'/static/tabbar/wode_sel.png',
						text:'我的',
						url:'/pages/user/index'
					}
				]
			};
		},
		methods:{
			toTabbarUrl(url,index){
				if(this.type == index){
					return false
				}
				uni.reLaunch({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.box{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.bom{
		height: env(safe-area-inset-bottom) ;
		width: 100%;
		background-color: #000000;
	}
.tabbar{
	width: 100%;
	height: 98rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	// padding-bottom: env(safe-area-inset-bottom);
	.item{
		flex: 1;
		text-align: center;
		.item_info{
			text-align: center;
			.item_info_img{
				width: 68rpx;
				height: 68rpx;
				margin: auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.item_info_img1{
				margin: auto;
				margin-bottom: 80rpx;
				position: relative;
				width: 112rpx;
				height: 112rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				text-align: center;
				line-height: 112rpx;
			}
			.item_info_text{
				font-size: 24rpx;
				color: #fff;
				opacity: 0.6;
			}
			.selectText{
				opacity: 1;
			}
		}
	}
}
</style>